<template>
  <PageMain>
    <template #header></template>
    <template #body>
      <div class="main-container">
        <div style="padding-left: 8px;">
          <a-tabs v-model="active" @tab-click="selectTab">
            <a-tab-pane key="1" title="合规报告">
              <ComplianceRport />
            </a-tab-pane>
            <a-tab-pane key="2" title="关联资产"> 
              <AssetList />
            </a-tab-pane>
          </a-tabs>
        </div>
      </div>
    </template>
  </PageMain>
</template>

<script setup lang="ts">
import PageMain from '@/components/PageBox.vue';
import { ref } from 'vue';
import AssetList from './components/AssetList.vue';
import ComplianceRport from './components/ComplianceRport.vue';
const active = ref(1);

const selectTab = (e: number|string) => {
  console.log(e);
};
</script>
<style lang="less" scoped>
.main-container {
  // padding: 0 24px;
}

::v-deep {
  .arco-tabs-nav {
    height: 56px;
  }
  .arco-tabs-content {
    padding-top: 0;
  }
  .arco-tabs-tab-title {
    color: #465a80;
  }
  .arco-tabs-tab-active .arco-tabs-tab-title {
    color: #1459fa;
  }
  .arco-tabs-nav-ink {
    background-color: #1459fa;
  }
}
</style>
